﻿
<script src="-rootliburl-PrettyPhoto/js/jquery.prettyPhoto.js" type="text/javascript"></script>

<div id="pictures_placeholder"></div>

<style type="text/css">
#pictures_placeholder a { float: left; color: #fff; font-size:1.2em; line-height:1.2em; position: relative; display: inline-block; margin: 0 3px 3px 0; }
#pictures_placeholder img { float:left; border: 0; }
#pictures_placeholder a > span { position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: rgba(0,0,0,0.6); text-align: center; overflow:hidden; transition:all 0.3s ease; }
#pictures_placeholder a:hover > span { height: 100%; }
#pictures_placeholder a > span > span { position: absolute; left: 0px; top: 50%; height:1.2em; margin-top:-0.6em; width: 100%; text-align: center; }
</style>

<script type="text/JavaScript">
$(document).ready(function() {
    $('head').append('<link href="-rootliburl-PrettyPhoto/css/prettyPhoto.css" rel="stylesheet" type="text/css"/>');
    jQuery.ajax({
        url: "-weburl-_api/lists/getbytitle('Pictures')/items?$select=Title,EncodedAbsUrl,LinkFilename",
        type: "GET",
        headers: { "accept": "application/json;odata=verbose" },
        success: function(data) {
            $.each(data.d.results, function(i,result) {
                var srcl = result.EncodedAbsUrl;
                var name = result.LinkFilename;
                var title = result.Title ? result.Title : "";
                var srcs = srcl.replace("/" + name, "/_t/" + name.replace(".", "_") + ".jpg");
                html = "<a href='" + srcl + "' rel='prettyPhoto[pp_gal]'><img src='" + srcs + "' alt='" + title + "'/><span><span>" + title + "</span></span></a>";
                $('#pictures_placeholder').append($(html));
            });
            $("a[rel^='prettyPhoto']").prettyPhoto({ deeplinking: false });
        }
    });
});
</script>
